<template>
  <div class="dashboard-editor-container">
    <!-- <github-corner class="github-corner" /> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="所属公司">
        <el-select v-model="formInline.gongsiSel" @change="initData" placeholder="所属公司">
          <el-option v-for="val in gongsiList" :key="val.id" :label="val.name" :value="val.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              当日实时收入
            </div>
            <count-to :start-val="0" :end-val="orderObj.orders" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('messages')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              昨日收入
            </div>
            <count-to :start-val="0" :end-val="orderObj.orderAmount" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('purchases')">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              当日实时订单数量
            </div>
            <count-to :start-val="0" :end-val="orderObj.customers" :duration="3200" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('messages')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              当日实时订单总额
            </div>
            <count-to :start-val="0" :end-val="orderObj.customerDiff" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              历史订单总量
            </div>
            <count-to :start-val="0" :end-val="orderObj.unPaid" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('messages')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              当日实时订单总额
            </div>
            <count-to :start-val="0" :end-val="orderObj.orderAvg" :duration="3000" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('purchases')">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              历史订单总金额
            </div>
            <count-to :start-val="0" :end-val="orderObj.ordersDiff" :duration="3200" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              历史订单总量
            </div>
            <count-to :start-val="0" :end-val="orderObj.orderAmountDiff" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
    </el-row>      
    <div style="margin-bottom: 40px;">
      <el-date-picker
        style="margin-top: 30px;"
        v-model="productDate"
        type="daterange"
        @change="getTrend"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-row v-if="lineChartData1.length > 0" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;margin-top: 20px;display: flex;justify-content: space-between;">
        <div v-if="lineChartData1.length>0" style="width:30%;height: 400px;" id="main1" ref="chart"></div>
        <div v-if="lineChartData2.length>0" style="width:30%;height: 400px;" id="main2" ref="chart"></div>
        <div v-if="lineChartData3.length>0" style="width:30%;height: 400px;" id="main3" ref="chart"></div>
      </el-row>
      <el-row v-if="lineChartData4.length > 0" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;margin-top: 20px;display: flex;justify-content: space-between;">
        <div v-if="lineChartData4.length>0" style="width:42%;height: 400px;" id="main4" ref="chart"></div>
        <div v-if="lineChartData5.length>0" style="width:42%;height: 400px;" id="main5" ref="chart"></div>
      </el-row>
      <el-row v-if="lineChartData6.length > 0" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;margin-top: 20px;display: flex;justify-content: space-between;">
        <div v-if="lineChartData6.length>0" style="width:42%;height: 400px;" id="main6" ref="chart"></div>
        <div v-if="lineChartData7.length>0" style="width:42%;height: 400px;" id="main7" ref="chart"></div>
      </el-row>
      <div style="text-align: center;color: rgba(0,0,0,.5);font-weight: bold;padding-top: 80px;padding-bottom: 60px;" v-if="lineChartData1.length == 0 && lineChartData2.length == 0 && lineChartData3.length == 0 && lineChartData4.length == 0 && lineChartData5.length == 0 && lineChartData6.length == 0 && lineChartData7.length == 0">
        暂无数据
      </div>
    </div>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import TransactionTable from './components/TransactionTable'
import TodoList from './components/TodoList'
import BoxCard from './components/BoxCard'
import { getOrderSummary, getOrderTrend } from '@/api/Operation'
import CountTo from 'vue-count-to'
import * as echarts from 'echarts';

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    TransactionTable,
    TodoList,
    CountTo,
    BoxCard
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      allDate: '',
      formInline: {
        gongsiSel: ''
      },
      gongsiList:[],
      orderObj:{},
      productDate:[],
      lineChartData1:[],
      lineChartData2:[],
      lineChartData3:[],
      lineChartData4:[],
      lineChartData5:[],
      lineChartData6:[],
      lineChartData7:[],
      dateList1:[],
      dateList2:[],
      dateList3:[],
    }
  },
  created() {
    this.gongsiList = JSON.parse(localStorage.getItem('companyList'));
    this.formInline.gongsiSel = this.gongsiList[0].id;
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    this.productDate = [start,end]; 
    console.log(this.productDate[0])
    this.initData();
  },
  methods: {
    initData(){
      getOrderSummary(this.formInline.gongsiSel).then((res)=>{
        this.orderObj = res.result;
      })
      this.getTrend();
    }, 
    getTrend() {   
      var list = {
        "tenantId": this.formInline.gongsiSel,
        "startDate": this.productDate[0],
        "endDate": this.productDate[1]
      };
      getOrderTrend(list).then((res)=>{        
        this.lineChartData1 = [];
        this.lineChartData2 = [];
        this.lineChartData3 = [];
        this.lineChartData4 = [];
        this.lineChartData5 = [];
        this.lineChartData6 = [];
        this.lineChartData7 = [];
        if(res.result && res.result.dayTrend.dayTrend && res.result.dayTrend.dayTrend.length>0){
          for(let i=0;i<res.result.dayTrend.dayTrend.length;i++){
            this.dateList2.push(this.timeChange(res.result.dayTrend.dayTrend[i].time));
            this.lineChartData4.push(res.result.dayTrend.dayTrend[i].amount);
            this.lineChartData5.push(res.result.dayTrend.dayTrend[i].orders);
          }
          setTimeout(()=>{
            this.echartInit2('main4',this.dateList2,this.lineChartData4,'订单金额日趋势');
            this.echartInit2('main5',this.dateList2,this.lineChartData5,'订单数量日趋势');
          },1000)
        }
        if(res.result && res.result.monthTrend.monthTrend && res.result.monthTrend.monthTrend.length>0){
          for(let i=0;i<res.result.monthTrend.monthTrend.length;i++){
            this.dateList3.push(this.timeChange(res.result.monthTrend.monthTrend[i].time));
            this.lineChartData6.push(res.result.monthTrend.monthTrend[i].amount);
            this.lineChartData7.push(res.result.monthTrend.monthTrend[i].orders);
          }
          setTimeout(()=>{
            this.echartInit2('main6',this.dateList3,this.lineChartData6,'订单金额月趋势');
            this.echartInit2('main7',this.dateList3,this.lineChartData7,'订单数量月趋势');
          },1000)
        }
        if(res.result && res.result.summaryTrends && res.result.summaryTrends.length>0){
          this.lineChartData1.push({
            name: '收入金额',
            type: 'line',
            stack: '总量',
            data: []
          },{
            name: '订单总金额',
            type: 'line',
            stack: '总量',
            data: []
          });   
          this.lineChartData2.push({
            name: '设备柜均金额',
            type: 'line',
            stack: '总量',
            data: []
          },{
            name: '订单均价',
            type: 'line',
            stack: '总量',
            data: []
          })  
          this.lineChartData3.push({
            name: '订单数量',
            type: 'line',
            stack: '总量',
            data: []
          },{
            name: '下单人数',
            type: 'line',
            stack: '总量',
            data: []
          })     
          for(let i=0;i<res.result.summaryTrends.length;i++){
            this.dateList1.push(this.timeChange(res.result.summaryTrends[i].date));
            this.lineChartData1[0].data[i] = res.result.summaryTrends[i].inCome;
            this.lineChartData1[1].data[i] = res.result.summaryTrends[i].orderAmount;
            this.lineChartData2[0].data[i] = res.result.summaryTrends[i].deviceAvg;
            this.lineChartData2[1].data[i] = res.result.summaryTrends[i].orderAvg;
            this.lineChartData3[0].data[i] = res.result.summaryTrends[i].orders;
            this.lineChartData3[1].data[i] = res.result.summaryTrends[i].customers;
          }
          setTimeout(()=>{
            this.echartInit('main1',this.dateList1,this.lineChartData1,'订单收入趋势','收入金额','订单总金额');
            this.echartInit('main2',this.dateList1,this.lineChartData2,'订单均价趋势','设备柜均金额','订单均价');
            this.echartInit('main3',this.dateList1,this.lineChartData3,'订单数量趋势','订单数量','下单人数');
          },1000)
        }
      })
    },
    //时间格式转化
    timeChange(UTCDateString) {
      if (!UTCDateString) {
        return '-';
      }
      function formatFunc(str) {
        return str > 9 ? str : '0' + str
      }
      var date2 = new Date(UTCDateString);
      console.log('时间', date2)
      var year = date2.getFullYear();
      var mon = formatFunc(date2.getMonth() + 1);
      var day = formatFunc(date2.getDate());
      var hour = date2.getHours();
      var noon = hour >= 12 ? 'PM' : 'AM'; // 判断是上午还是下午
      hour = hour >= 12 ? hour - 12 : hour; // 12小时制
      hour = formatFunc(hour);
      var min = formatFunc(date2.getMinutes());
      var sec = formatFunc(date2.getSeconds());
      var dateStr = year + '-' + mon + '-' + day + ' ' + hour + ':' + min + ':' + sec;
      return dateStr;
    },
    echartInit(id,arr1,arr2,title,text1,text2){
      var chartDom = document.getElementById(id);
      this.myChart = echarts.init(chartDom);
      var option;

      option = {
          title: {
            text: title
          },
          xAxis: {
              type: 'category',
              data: arr1
          },
          yAxis: {
              type: 'value'
          }, 
          legend: {
              data: [text1, text2]
          },       
          series: [
              {
                  name: text1,
                  width: '360px',
                  height: '540px',
                  top: '-46px',
                  left: '36px',
                  type: 'line',
                  center: ['50%', '50%'],
                  data: arr2[0].data
              },
              {
                  name: text2,
                  width: '360px',
                  height: '540px',
                  top: '-46px',
                  left: '36px',
                  type: 'line',
                  center: ['50%', '50%'],
                  data: arr2[1].data
              },
          ]
      };
      option && this.myChart.setOption(option);
      window.addEventListener("resize", () => {
        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
        this.myChart.resize();
        // 如果有多个echarts，就在这里执行多个echarts实例的resize方法,不过一般要做组件化开发，即一个.vue文件只会放置一个echarts实例
        /*
        this.myChart2.resize();
        this.myChart3.resize();
        ......
        */
      });
    },
    
    echartInit2(id,arr1,arr2,title){
      var chartDom = document.getElementById(id);
      this.myChart = echarts.init(chartDom);
      var option;

      option = {
          title: {
            text: title
          },
          xAxis: {
              type: 'category',
              data: arr1
          },
          yAxis: {
              type: 'value'
          },        
          series: [
              {
                  name: title,
                  width: '360px',
                  height: '540px',
                  top: '-46px',
                  left: '36px',
                  legendHoverLink: true,
                  stillShowZeroSum: true,
                  type: 'line',
                  center: ['50%', '50%'],
                  data: arr2
              }
          ]
      };
      option && this.myChart.setOption(option);
      window.addEventListener("resize", () => {
        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
        this.myChart.resize();
        // 如果有多个echarts，就在这里执行多个echarts实例的resize方法,不过一般要做组件化开发，即一个.vue文件只会放置一个echarts实例
        /*
        this.myChart2.resize();
        this.myChart3.resize();
        ......
        */
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 10px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }

    .card-panel-description2 {
      
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;
      margin-left: 110px;

      .card-panel-text {
        line-height: 52px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 22px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}
.dashboard-editor-container {
  padding: 16px 32px;
  // background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  .time{
    width: 100%;
    height: 36px;
    background: #fff;
    >div{
      float: right;
    }
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
